<template>
  <div>
    <h4>取件作业管理</h4>
    <!-- 上面部分 -->
    <el-card style="margin:20px">
      <el-form label-width="110px">
        <el-row :gutter="30">
          <el-col :span="8">
            <el-form-item label="取件任务编号：" prop="taskNum">
              <el-input v-model="taskNum" placeholder="请输入取件任务编号" style="width:80%" />
            </el-form-item>
          </el-col>

          <el-col :span="8">
            <el-form-item label="订单编号：" prop="orderNum">
              <el-input v-model="orderNum" placeholder="请输入订单编号" />
            </el-form-item>
          </el-col>

          <el-col :span="8">
            <el-form-item label="所属营业部：" prop="businessDep">
              <el-select v-model="businessDep" placeholder="请选择所属营业部">
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="30">
          <el-col :span="8">
            <el-form-item label="预计完成时间：" prop="incomplete">
              <el-date-picker
                v-model="incomplete"
                style="width:80%"
                type="datetimerange"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                :default-time="['12:00:00']"
              />
            </el-form-item>
          </el-col>

          <el-col :span="8">
            <el-form-item label="实际完成时间：" prop="complete" style="width:20vw">
              <el-date-picker
                v-model="complete"
                style="width:90%"
                type="datetimerange"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                :default-time="['12:00:00']"
              />
            </el-form-item>
          </el-col>

          <el-col :span="8">
            <el-form-item label="任务分配状态：" prop="taskAssignmentState">
              <el-select v-model="taskAssignmentState" placeholder="请选择任务分配状态">
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-button type="danger">搜索</el-button>
        <el-button>重置</el-button>
      </el-form>
    </el-card>

    <!-- 中间部分 tabs标签页 -->
    <el-card style="margin:20px">
      <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
        <el-tab-pane label="全部" name="first" />
        <el-tab-pane label="新任务" name="second" />
        <el-tab-pane label="已完成" name="third" />
        <el-tab-pane label="已取消" name="fourth" />
      </el-tabs>
    </el-card>

    <!-- 下面部分 -->
    <el-card style="margin:20px">
      <el-button type="danger">人工分配</el-button>
      <!-- stripe 带斑马纹表格  -->
      <el-table
        :data="arr"
        stripe
        tooltip-effect="dark"
        @selection-change="handleSelectionChange"
      >
        <el-table-column
          type="selection"
          width="55"
          :selectable="selectable"
        />
        <el-table-column label="序号" type="index" />
        <el-table-column label="取件任务编号" prop="id" />
        <el-table-column label="所在营业部" prop="agencyName" />
        <el-table-column label="任务分配状态" prop="signRecipient" :formatter="formatStatus" />
        <el-table-column label="快递员姓名" prop="courierName" />
        <el-table-column label="订单编号" prop="orderId" />
        <el-table-column label="预计开始时间" prop="estimatedStartTime" />
        <el-table-column label="预计完成时间" prop="estimatedEndTime" />
        <el-table-column label="实际完成时间" prop="actualEndTime" />
        <div />

        <template slot="empty">
          <img src="./kong.png" alt="">
          <div>没有找到您要的内容哦~</div>
        </template>
      </el-table>
      <!-- 分页组件 -->
      <el-row type="flex" justify="center" align="middle" style="height: 60px">

        <el-pagination
          :page-sizes="[10, 20, 30, 40, 50, 60, 70]"
          :page-size="pageConfig.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="pageConfig.total"
          @size-change="currentChange"
          @current-change="currentChange"
        />
      </el-row>
    </el-card>
  </div>

</template>

<script>
// 引入api接口
import { getDispatchPage } from '@/api/modules/scheduling/pickupJob'
// 引入枚举数据
import scheduling from '@/constant/scheduling'
export default {
  data() {
    return {
      aa: [],
      scheduling,
      show: false,
      // 下拉框
      options: [],
      value: '',
      // 每一项
      taskNum: '', // 取件任务编号
      orderNum: '', // 订单编号
      businessDep: '', // 所属营业部
      incomplete: '', // 预计完成时间
      complete: '', // 实际完成时间
      taskAssignmentState: '', // 任务分配状态
      total: 0,
      // 高亮Tabs标签页
      activeName: 'first',
      pageConfig: {
        page: 1,
        pageSize: 10,
        total: 0
      },
      arr: []
    }
  },
  async created() {
    this.loadpage()
    console.log(this.arr)
  },
  methods: {
    async loadpage() {
      const res = await getDispatchPage({ ...this.pageConfig })
      console.log(res)
      this.arr = res.data.items
      console.log(2, this.arr.filter(v => v.status === 2))
      console.log(3, this.arr.filter(v => v.status === 3))

      // 因为总数是字符串类型需要转成数字类型
      this.pageConfig.total = Number(res.data.counts)
      const { page, pageSize } = res.data
      this.pageConfig.page = page
      this.pageConfig.pageSize = pageSize
    },
    // tabs标签页函数
    handleClick(tab, event) {
      if (tab.label === '全部') this.loadpage()
      // 过滤新任务数组
      if (tab.label === '新任务') this.arr = this.arr.filter(v => v.actualEndTime === null)
      if (tab.label === '已完成') this.arr = this.arr.filter(v => v.status === 2)
      if (tab.label === '已取消') this.arr = this.arr.filter(v => v.status === 3)
    },
    // 分页切换
    currentChange(newPage) {
      this.pageConfig.page = newPage
      this.loadpage()
    },
    handleSelectionChange() {},
    // 禁用全选框
    selectable() {
      return false
    },
    // 枚举数据显示任务分配状态
    formatStatus(row, column, val, index) {
      const res = scheduling.signRecipient.find(v => v.id === val)
      return res ? res.value : ''
    }

  }
}
</script>

<style>

</style>
